---
title: कस्टम थीम
description: एक कस्टम थीम बनाना
---

# कस्टम थीम

## एक कस्टम थीम बनाना

> ध्यान दें: यह API अस्थिर है और निकट भविष्य में बदल सकता है। हम अभी के लिए [बिल्ट-इन थीम्स](/docs/theming) के साथ रहना सुझाव देते हैं।

हालांकि बिल्ट-इन थीम्स कुछ स्तर की कस्टमाइजेशन की सुविधा प्रदान करती हैं, `Theme` प्रकार आपके अपने कस्टम थीम्स को परिभाषित करने में मदद करता है, जिससे आप परोक्ष थीम वेरिएबल्स तक निम्न-स्तरीय पहुँच प्राप्त कर सकते हैं।

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### एक बिल्ट-इन थीम का विस्तार करना

आप बिल्ट-इन थीम का पूरा परिभाषण किए बिना इसे विस्तारित कर सकते हैं। यह तब उपयोगी होता है जब आप केवल विशेष थीम टोकन को ओवरराइड करना चाहते हैं।

इसके लिए, `lodash.merge` (या इसके समकक्ष) इंस्टॉल करें:

```bash
npm install lodash.merge
```

इसे इम्पोर्ट करें, साथ ही उस थीम को जिसे आप विस्तारित करना चाहते हैं (उदा: `darkTheme`) और TypeScript के `Theme` प्रकार को।

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

फिर, बिल्ट-इन थीम को उन थीम टोकन के साथ मर्ज करें जिन्हें आप ओवरराइड करना चाहते हैं। इस उदाहरण में, मैं अपने ब्रांड के एक्सेंट रंग से मिलाने के लिए `accentColor` टोकन को ओवरराइड कर रहा हूँ।

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

अंत में, आप अब अपने कस्टम थीम को `RainbowKitProvider` के `theme` प्रॉप के लिए भेज सकते हैं।

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### कस्टम थीम चयनकर्ता बनाना

यदि आपका ऐप सर्वर/स्थैतिक रेंडर है और उपयोगकर्ताओं को विषयों के बीच मैन्युअली टॉगल करने की अनुमति देता है, तो RainbowKit की थीमिंग प्रणाली कस्टम CSS चयनकर्ताओं के लिए निम्नलिखित कार्यों के साथ जोड़ी जा सकती है, जिन्हें किसी भी CSS-in-JS प्रणाली के साथ उपयोग में लाया जा सकता है:

- `cssStringFromTheme`
- `cssObjectFromTheme`

ये फंक्शंस सभी आवश्यक थीम वेरिएबल्स को सेट करने वाला CSS लौटाते हैं। चूंकि दोनों स्ट्रिंग्स और ऑब्जेक्ट्स समर्थित हैं, इसे किसी भी CSS-in-JS प्रणाली के साथ एकीकृत किया जा सकता है।

एक बुनियादी उदाहरण के रूप में, आप प्रत्येक थीम के लिए कस्टम चयनकर्ताओं के साथ अपने `style` तत्व को रेंडर कर सकते हैं। चूंकि हम थीम के CSS को रेंडर करने का नियंत्रण ले रहे हैं, हम `theme` प्रॉप के लिए `null` पास कर रहे हैं ताकि RainbowKitProvider हमारे लिए कोई शैली नहीं बनाये। cssStringFromTheme फंक्शन पर विस्तार विकल्प का उपयोग करने का भी ध्यान दें जो बेस थीम के समान किसी भी थीम वेरिएबल्स को छोड़ देता है।

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
